import MyIcon from '@/components/MyIcon';
import { downloadTemplate, getFileNameByPath, getTenantID, newGetFileNameNotType, wordHandChildParam, wordToChildParams } from '@/utils';
import { Descriptions, Tooltip, message } from 'antd';
import { useMemo } from 'react';
import { EyeOutlined } from '@ant-design/icons';
import { NtkoPlugin } from '@/common/NtkoPluginType';
import { saveToURLWordService } from '../services';
import { getBaseUrl } from '@/services/urlconst';
import { ILoadMapTypeAll } from '@/common';

const DesItem = Descriptions.Item;

export const DetailDrawerInfoView: React.FC<TempContractManageAPI.IDetailDrawerInfoView> = ({ tempDetailInfo, curRes }) => {
  /** 判断权限 */
  const wordQueryMemo = useMemo(() => {
    let wordInfo: Record<string, any> = {
      isReadOnly: 0,
      filedUrl: tempDetailInfo?.templateURL,
    };
    if (curRes['/contractTemplateController/readUpdate'] && tempDetailInfo?.state == `${getTenantID()}${ILoadMapTypeAll.CONTRACTTEMP_STATE}1000`) {
      wordInfo['isReadOnly'] = '0';
    } else if (curRes['/contractTemplateController/readOnly']) {
      wordInfo['isReadOnly'] = '1';
    }
    const fieldUrl: string = `${getBaseUrl()}/static/NtkoPlugin/index.html?cmd=1&isReadOnly=${wordInfo?.isReadOnly}&filedUrl=${getBaseUrl()}${
      wordInfo?.filedUrl
    }`;
    return fieldUrl;
  }, [tempDetailInfo, curRes]);

  /** 保存文件接口回调 */
  const saveToUrlWordCallback = (res: any) => {
    const messageObj = {
      msgFlag: res?.msgFlag,
      msgText: res?.msg,
      msgType: 'uploadFiledRequest',
    };
    wordToChildParams(ntkoBrowser, wordQueryMemo, messageObj);
  };

  /** 保存文件接口 */
  const { wordSaveToURLRun } = saveToURLWordService(saveToUrlWordCallback);

  /** 保存文件回调 */
  const ntkoCallback = (childValue) => {
    const childBase = JSON.parse(childValue);
    if (childBase?.baseUrl && childBase?.baseObj) {
      wordSaveToURLRun({
        ...childBase,
        baseUrl: tempDetailInfo?.templateURL,
      });
    }
  };

  /** 引入在线预览 */
  const ntkoBrowser = useMemo(() => {
    const { ntkoBrowser } = NtkoPlugin(ntkoCallback);
    return ntkoBrowser;
  }, []);

  /** 处理返回数据字典 */
  const getLoadMapDom = (loadName: string, iconType?: any) => {
    if (loadName) {
      const [colorText, color] = loadName?.split('||');
      return (
        <span>
          {iconType ? (
            <>
              <MyIcon type={iconType} style={{ color: color }} />
              &nbsp;
            </>
          ) : (
            <></>
          )}
          {colorText || '--'}
        </span>
      );
    } else {
      return <span>--</span>;
    }
  };

  /** 返回范本文件名称 */
  const tempUrlFieldName = useMemo(() => {
    return tempDetailInfo?.templateURL ? getFileNameByPath(tempDetailInfo?.templateURL) : '';
  }, [tempDetailInfo?.templateURL]);

  /** 在线预览 */
  const openNtkoWordField = () => {
    const extensBool = ntkoBrowser.ExtensionInstalled();
    const fieldUrl: string = wordQueryMemo;
    if (extensBool) {
      ntkoBrowser?.openWindow(fieldUrl, false, '', '');
    }
  };

  return (
    <Descriptions bordered={true} size="small" column={4}>
      <DesItem
        span={4}
        label={
          <>
            <MyIcon type="icon-hetongguanli-" />
            &nbsp;范本名称
          </>
        }
      >
        <div>{tempDetailInfo?.fullName || '--'}</div>
      </DesItem>
      <DesItem
        span={4}
        label={
          <>
            <MyIcon type="icon-hetongxiangqing" />
            &nbsp;范本描述
          </>
        }
      >
        {tempDetailInfo?.templateInfo || '--'}
      </DesItem>
      <DesItem
        span={2}
        label={
          <span>
            <MyIcon type="icon-leixing1" />
            &nbsp;&nbsp;范本类型
          </span>
        }
      >
        {(tempDetailInfo?.templateTypeName && getLoadMapDom(tempDetailInfo?.templateTypeName)) || '--'}
      </DesItem>
      <DesItem
        span={2}
        label={
          <span>
            <MyIcon type="icon-wuziguanli1" />
            &nbsp;&nbsp;范本类别
          </span>
        }
      >
        {(tempDetailInfo?.businessTypeName && getLoadMapDom(tempDetailInfo?.businessTypeName)) || '--'}
      </DesItem>
      <DesItem
        span={2}
        label={
          <span>
            <MyIcon type="icon-zhuangtai1" />
            &nbsp;&nbsp;范本状态
          </span>
        }
      >
        {(tempDetailInfo?.stateName && getLoadMapDom(tempDetailInfo?.stateName, 'icon-dian')) || '--'}
      </DesItem>

      <DesItem
        span={2}
        label={
          <span>
            <MyIcon type="icon-fanganzhizuo_huaban" />
            &nbsp;&nbsp;范本文本
          </span>
        }
      >
        {tempDetailInfo?.templateURL ? (
          <Tooltip title={tempUrlFieldName}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <a
                onClick={() => {
                  message.success('下载中，请稍后...');
                  downloadTemplate('/announceController/downloadFile', tempUrlFieldName, tempDetailInfo?.templateURL, () => {});
                }}
              >
                <MyIcon type="icon-file-text-fill" />
                &nbsp;
                {newGetFileNameNotType(tempUrlFieldName, 6)}
              </a>
              {(curRes?.['/contractTemplateController/readUpdate'] || curRes?.['/contractTemplateController/readOnly']) && (
                <a
                  onClick={() => {
                    openNtkoWordField();
                  }}
                >
                  &nbsp;
                  <EyeOutlined />
                </a>
              )}
            </div>
          </Tooltip>
        ) : (
          '--'
        )}
      </DesItem>
      {/* <DesItem
        span={2}
        label={
          <span>
            <MyIcon type="icon-zhuangtai1" style={{ fontSize: 18 }} />
            &nbsp;&nbsp;发布状态
          </span>
        }
      >
        {(tempDetailInfo?.templateTypeName && getLoadMapDom(tempDetailInfo?.templateTypeName)) || '--'}
      </DesItem> */}
      {tempDetailInfo?.signerID && (
        <>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-user'} />
                &nbsp;发布人
              </>
            }
          >
            {tempDetailInfo?.signerName || '--'}
          </DesItem>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-time'} />
                &nbsp;发布时间
              </>
            }
          >
            {tempDetailInfo?.signTime || '--'}
          </DesItem>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-gangweitubiao'} />
                &nbsp;发布岗位
              </>
            }
          >
            {tempDetailInfo?.signPositionName || '--'}
          </DesItem>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-bumen'} />
                &nbsp;发布部门
              </>
            }
          >
            {tempDetailInfo?.signDepartmentName || '--'}
          </DesItem>
        </>
      )}

      <DesItem
        span={2}
        label={
          <>
            <MyIcon type={'icon-user'} />
            &nbsp;申请人
          </>
        }
      >
        {tempDetailInfo?.createrName || '--'}
      </DesItem>
      <DesItem
        span={2}
        label={
          <>
            <MyIcon type={'icon-time'} />
            &nbsp;申请时间
          </>
        }
      >
        {tempDetailInfo?.createTime || '--'}
      </DesItem>
      <DesItem
        span={2}
        label={
          <>
            <MyIcon type={'icon-gangweitubiao'} />
            &nbsp;申请岗位
          </>
        }
      >
        {tempDetailInfo?.createPositionName || '--'}
      </DesItem>
      <DesItem
        span={2}
        label={
          <>
            <MyIcon type={'icon-bumen'} />
            &nbsp;申请部门
          </>
        }
      >
        {tempDetailInfo?.createDepartmentName || '--'}
      </DesItem>

      {tempDetailInfo?.cancelerID && (
        <>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-leixing'} />
                &nbsp;作废类型
              </>
            }
          >
            {(tempDetailInfo?.cancelTypeName && getLoadMapDom(tempDetailInfo?.cancelTypeName)) || '--'}
          </DesItem>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-time'} />
                &nbsp;作废时间
              </>
            }
          >
            {tempDetailInfo?.createTime || '--'}
          </DesItem>
          <DesItem
            span={4}
            label={
              <>
                <MyIcon type={'icon-beizhu'} />
                &nbsp;作废原因
              </>
            }
          >
            {tempDetailInfo?.cancelReason || '--'}
          </DesItem>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-user'} />
                &nbsp;作废人
              </>
            }
          >
            {tempDetailInfo?.cancelerName || '--'}
          </DesItem>

          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-gangweitubiao'} />
                &nbsp;作废岗位
              </>
            }
          >
            {tempDetailInfo?.cancelPositionName || '--'}
          </DesItem>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-bumen'} />
                &nbsp;作废部门
              </>
            }
          >
            {tempDetailInfo?.cancelDepartmentName || '--'}
          </DesItem>
          <DesItem
            span={2}
            label={
              <>
                <MyIcon type={'icon-gongsi'} />
                &nbsp;作废公司
              </>
            }
          >
            {tempDetailInfo?.cancelCompanyName || '--'}
          </DesItem>
        </>
      )}
    </Descriptions>
  );
};
